<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>716在线聊天系统——聊天界面</title>
    <!--<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>-->
    <!--<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>-->
    <script src="scripts/jquery.js"></script>
    <script src="scripts/md5.js"></script>
    <script src="scripts/common.js"></script>
    <script src="scripts/chat.js"></script>
    <link href="css/chat.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="main_container">
    <div id="friends">
        <div class="person-center">
            您好，<span id="username"></span>
            <button id="btn-exit">退出登录</button>
        </div>
        <div class="search-friend-wrapper">
            <div id="search-friend-input-box">
                <input type="search" id="search-friend-input" placeholder="输入好友账号搜索">
                <button id="btn-search" type="button">搜索</button>
            </div>
            <div id="div-search-friend-output">
                <ul id="search-friend-output" class="friend-list">
                    <!--<li class="friend-item">未添加的好友-->
                    <!--<button class="friend-item-ops">添加</button>-->
                    <!--</li>-->
                    <!--<li class="friend-item">已添加的好友-->
                    <!--<button class="friend-item-ops">发消息</button>-->
                    <!--<button class="friend-item-ops">删除</button>-->
                    <!--</li>-->
                    <!--<li class="friend-item">未添加的好友-->
                    <!--<button class="friend-item-ops">添加</button>-->
                    <!--</li>-->
                </ul>
            </div>
        </div>
        <div id="div-friends">
            <ul id="friend-list" class="friend-list">
                <!--<li class="friend-item">已添加的好友-->
                <!--<button class="friend-item-ops">发消息</button>-->
                <!--<button class="friend-item-ops">删除</button>-->
                <!--</li>-->
                <!--<li class="friend-item">已添加的好友-->
                <!--<button class="friend-item-ops">发消息</button>-->
                <!--<button class="friend-item-ops">删除</button>-->
                <!--<span class="new-msg">（有新消息！）</span>-->
                <!--</li>-->
                <!--<li class="friend-item">已添加的好友超长好友名称超长好友名称超长好友名称超长好友名称超长好友名称超长好友名称-->
                <!--<button class="friend-item-ops">发消息</button>-->
                <!--<button class="friend-item-ops">删除</button>-->
                <!--</li>-->
                <!--<li class="friend-item">已添加的好友-->
                <!--<button class="friend-item-ops">发消息</button>-->
                <!--<button class="friend-item-ops">删除</button>-->
                <!--<span class="new-msg">（有新消息！）</span>-->
                <!--</li>-->
                <!--<li class="friend-item">已添加的好友-->
                <!--<button class="friend-item-ops">发消息</button>-->
                <!--<button class="friend-item-ops">删除</button>-->
                <!--</li>-->
                <!--<li class="friend-item">等待对方确认的好友-->
                <!--<button class="friend-item-ops">取消添加</button>-->
                <!--</li>-->
                <!--<li class="friend-item">好友的添加请求-->
                <!--<button class="friend-item-ops">同意</button>-->
                <!--<button class="friend-item-ops">拒绝</button>-->
                <!--</li>-->
            </ul>
        </div>
    </div>
    <div id="chat">
        <div id="chat-title">
            <span id="current-friend-memo-name">好友昵称（好友账号）</span>
            <button style='float: right;' id="close-chat">关闭窗口</button>
        </div>
        <hr>
        <div id="msg-list">
            <!--<div class="msg-item msg-item-recv">-->
            <!--<div class="msg-time">2017-11-26 11:32:10</div>-->
            <!--<div class="msg-content">接受到的消息</div>-->
            <!--</div>-->
            <!--<div class="msg-item msg-item-sent">-->
            <!--<div class="msg-time">2017-11-26 11:32:10</div>-->
            <!--<div class="msg-content">发送的消息</div>-->
            <!--</div>-->
            <!--<div class="msg-item msg-item-recv">-->
            <!--<div class="msg-time">2017-11-26 11:32:10</div>-->
            <!--<div class="msg-content">接受到的消息</div>-->
            <!--</div>-->
            <!--<div class="msg-item msg-item-sent">-->
            <!--<div class="msg-time">2017-11-26 11:32:10</div>-->
            <!--<div class="msg-content">发送的消息</div>-->
            <!--</div>-->
        </div>
        <hr>
        <div id="msg-editor">
            <textarea id="msg-editor-input"></textarea>
            <div id="msg-editor-buttons">
                <button id="btn-clear-msg">清空</button>
                <button id="btn-send-msg">发送（ Ctrl + Enter ）</button>
            </div>
        </div>
    </div>
    <div id="chat-empty"></div>
</div>
</body>
</html>